<template>
    <div class="header" :class="{ active: isTop }">
        <div style="width: 14%;">
            <van-icon name="wap-nav" size="20" />
        </div>
        <div style="width: 72%;">
            <div style="font-size: 18px;width: 100%;
                 border-radius: 20px;height: 34px;margin-top: 8px;
                 display: flex;align-items: center;" :class="{searchColor:isTop}">
                 
                 <span style="color: #1BAEAE;margin-left: 15px;font-weight: bolder;">码路严选</span>&nbsp;
                    <span style="color: rgb(97, 97, 97);font-size:20px;font-weight: 200;">丨</span>

                    <input type="text" placeholder="请输入商品名称" 
                    style="width: 47%;height: 80%; font-size: 12px;
                    border: 0px; color: #333;" :class="{searchColor:isTop}" ref="search">

                    <van-icon name="search" />
                </div>
        </div>
        <div style="width: 14%;">
            <van-icon name="user-o" size="20" />
        </div>
    </div>
    <p style="height:50px;"></p>

    <div style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh;box-sizing: border-box;">

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1BAEAE" style="border-radius: 8px;overflow: hidden;">
            <van-swipe-item v-for="item in carouselsList">
                <img :src="item.pic_url" alt="" style="width: 100%;height: 170px;">
            </van-swipe-item>
        </van-swipe>

        <p style="height:10px;"></p>
        <!-- grid宫格 -->
        <van-grid :column-num="5" border style="color: #1BAEAE;border-radius: 10px;overflow: hidden;">
            <van-grid-item icon="shopping-cart" text="码路超市" />
            <van-grid-item icon="goods-collect" text="服饰" />
            <van-grid-item icon="hot" text="热卖" />
            <van-grid-item icon="new-arrival" text="新品上市" />
            <van-grid-item icon="logistics" text="码路到家" />
            <van-grid-item icon="after-sale" text="充值缴费" />
            <van-grid-item icon="friends-o" text="9.9元拼" />
            <van-grid-item icon="coupon-o" text="领劵" />
            <van-grid-item icon="vip-card" text="VIP专属" />
            <van-grid-item icon="label" text="全部" />
        </van-grid>
        <!-- 商品 -->
        <div>
            <p style="height:50px; color: #1BAEAE;line-height: 60px;text-align: center;">热卖商品</p>
            <ul style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                <li style='width: 49%;height: 230px; background-color: #fff;display: flex;
                justify-content: space-around;flex-direction: column;
                padding: 10px;box-sizing: border-box; text-align: center;margin-bottom: 5px;'
                    v-for="item in hotGoodsesList" @click="getGoods(item)">
                    <img :src="item.pic_url" alt="hi✿(。◕‿◕。)✿" style="width:100%;height: 152px;">
                    <p style="margin-top: 8px;">{{ item.name }}</p>
                    <p style="color: #1BAEAE;">￥{{ item.price.toFixed(2) }}</p>
            </li >

            </ul>
        </div>
        <!-- 返回顶部 -->
        <van-back-top right="12vw" bottom="10vh" style="background-color: #1BAEAE;"/>
        <div style="height: 50px;"></div>
    </div>
</template>

<script setup>
import { ref, reactive,nextTick } from 'vue'
import { Swipe, SwipeItem,Grid, GridItem,BackTop } from 'vant';
import { getcarouselsList, gethotGoodsesList } from '@/api/index'
import {useRouter} from 'vue-router'

let isTop = ref(false)

let carouselsList = reactive([])
let hotGoodsesList = reactive([])

//给头部添加背景色
window.addEventListener('scroll', () => {
    let top = document.documentElement.scrollTop
    if (top > 50) {
        isTop.value = true
    } else {
        isTop.value = false
    }
})

//获取轮播图数据
getcarouselsList({ page: 1, limit: 10 }).then(res => {
    if (res.code == 1) {
        carouselsList.push(...res.data.list)
    }
})
//获取商品数据
gethotGoodsesList({ page: 1, limit: 20 }).then(res => {
    if (res.code == 1) {
        hotGoodsesList.push(...res.data.list)
       // console.log(res)
    }
})

//搜索框自动聚焦
// let search=ref()
// nextTick(()=>{
//     search.value.focus()
// })
//商品详情
 let router=useRouter()
 function getGoods(item){
    router.push(`/goods/${item.id}`)
 }


</script>

<style scoped>
.header {
    width: 100%;
    display: flex;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #fff;
    position: fixed;
    z-index: 99;
    opacity: 0.9;
    color: #0b9d9d;
}

.active {
    background-color: #0b9d9d;
    color: #fff;
}
.searchColor{
   background-color: #a6e5e5;
}
</style>